class Magnifier {
    constructor() {
        // 获取元素
        this.sBox = document.querySelector(".magnifier-img");
        this.sSpan = document.querySelector(".magnifier-img span");
        this.bBox = document.querySelector(".magnifier-Bigimg");
        this.bImg = document.querySelector(".magnifier-Bigimg img");
        // 执行补全布局
        this.init();
        // 执行绑定事件
        this.addEvent();
    }
    init() {
        // 补全布局
        // 补全布局
        // 如果DOM元素在css中被设置display:none，那么在js中无法获取才元素的信息
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    addEvent() {
        // 绑定事件
        // 进入
        let that = this;
        this.sBox.onmouseenter = function () {
            // 执行显示
            that.show();
        }
        // 离开
        this.sBox.onmouseleave = function () {
            // 执行隐藏
            that.hide();
        }
        // 移动
        this.sBox.onmousemove = function (eve) {
            let e = eve || window.event;
            // 执行移动
            that.move({
                x: e.offsetX,
                y: e.offsetY
            });
        }
    }
    show() {
        // 显示
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
        // 执行补全布局
        this.init();
    }
    hide() {
        // 隐藏
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
    move(ops) {
        // 移动
        // console.log(ops);
        // 遮罩层跟随鼠标移动
        let l = ops.x - this.sSpan.offsetWidth / 2
        let t = ops.y - this.sSpan.offsetHeight / 2
        // console.log(this.sSpan.style.left);
        // 限制边界
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        // 根据遮罩层移动的距离计算比例
        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        // 根据比例计算右侧大图的移动距离
        // console.log(x,y);
        this.bImg.style.left = - x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = - y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
}
new Magnifier();
// ===================================================================





const id = location.search.split("=")[1];

ajax({
    url: "http://localhost:3000/api",
    success: res => {
        res = JSON.parse(res).data.msg;
        let i = 0;
        res.some((val, idx) => {
            i = idx;
            return val.proId === id;
        })
        // console.log(res[i].img);
        $(".magnifier-img>img").src = res[i].img;
        // console.log($(".magnifier-img>img").src);
        $(".magnifier-Bigimg>img").src = res[i].img;
        // console.log($(".ns-border-color-gray>img"))
        $(".basic-info-wrap>h1").innerHTML = res[i].proName;
        $("#xsgood_price").innerHTML = res[i].price;
        let str = "";
        res[i].imgs.forEach(val=>{
            str += `<li class="ns-border-color-gray">
                        <img src="${val}" alt="">
                    </li>`
                    
                    
                })
            $(".list-img").innerHTML = str;

            function Tab(){
                this.li = document.querySelectorAll(".list-img>li");
                this.sImg = document.querySelector(".magnifier-img  img");
                this.bImg = document.querySelector(".magnifier-Bigimg > img");
                console.log(res[i].imgs);
                this.data = res[i].imgs;
                console.log(this.data);
                this.index = 0;
                this.addEvent();
            }
            Tab.prototype.addEvent = function(){
                const that = this;
                for(let i=0;i<this.li.length;i++){
                    this.li[i].xuhao = i;
                    this.li[i].onclick = function(){
                        that.hide();
                        that.getIndex(this);
                    }
                }
            }
            Tab.prototype.hide = function(){
                this.li[this.index].className = "";
            }
            Tab.prototype.getIndex = function(now){
                this.index = now.xuhao;
                this.show();
            }
            Tab.prototype.show = function(){
                this.li[this.index].className = "active";
                this.sImg.src = this.data[this.index]
                this.bImg.src = this.data[this.index];
            }
            new Tab();
    },
    data: {
        type: "getGoods"
    }
})

function $(s) {
    return document.querySelector(s)
}
